<template>
    <div class="common-layout">
        <el-table :data="state.data" height="900" 
        :cell-class-name="tableCellClassName"
        @sort-change="sortChange"
        @cell-click="cellClick"
        :default-sort="state.sort"
        show-summary
        style="width: 100%">
            <el-table-column prop="date" label="date" width="120" sortable/>
            <el-table-column prop="day" label="星期" width="80">
                <template #default="scope">
                    {{ getDayOfWeek(scope.row.date) }}
                </template> 
            </el-table-column>
            <el-table-column prop="state" label="状态" width="100"/>
            <el-table-column prop="stock" label="股票" width="120" />
            <el-table-column prop="operation" label="建议操作" width="100"/>
            <el-table-column prop="category" label="category"/>
            <el-table-column prop="type" label="type"/>
            <el-table-column prop="dataType" label="dataType" sortable/>
            <el-table-column prop="extra" label="extra"/>
            <el-table-column prop="weight" label="权重"/>
            <el-table-column prop="description" label="description"/>
        </el-table>
    </div>
</template>

<script>
import { computed, reactive } from 'vue';
import { getSessionStorage, setSessionStorage } from '@/utils/help';
import { formatCurrency, getLpClassName } from '@/utils/help';
import { getDayOfWeek } from '../../utils/help';
import ToStockDetail from '../ToStockDetail.vue';
import { getMonitorStockListData } from '../../service/monitor';

export default {
    components: {
        ToStockDetail
    },
   setup() {
        const baseKey = "LastedOperation"
        const selectKey = baseKey + "Select"
        const sortPropKey = baseKey + "SortProp"
        const sortOrderKey = baseKey + "SortOrder"

        const state = reactive({
            rawData: [],
            operationSelected: "",
            operationSelectedStock: "",
            data: [],
            selected: getSessionStorage(selectKey) || '全部',
            sort: { 
                prop: getSessionStorage(sortPropKey) || 'date' , 
                order: getSessionStorage(sortOrderKey) || 'desc' 
            }
        })

        const loadData = () => {
            getMonitorStockListData(state.operationSelectedStock).then( res => {
                state.rawData = res.data
                state.data = res.data
            })
        }
        
        loadData()

        const sortChange = (column, prop, order) => {
            setSessionStorage(sortPropKey, column.prop)
            setSessionStorage(sortOrderKey, column.order)
        }

        const cellClick = (row, column, cell, event) => {
            let columnProperty = column.property
            let val = row[columnProperty]

            if (columnProperty == 'stock') {
                // 点相同的股票名则取消选择
                if (state.operationSelectedStock != "" && state.operationSelectedStock == val) {
                    state.operationSelectedStock = ""
                } else {
                    state.operationSelectedStock = val
                }
                // 重新请求数据
                loadData()
            }

            if (['operation','category','type'].includes(columnProperty)) {
                if (state.operationSelected != "" && state.operationSelected == val) {
                    state.operationSelected = ""
                    state.data = state.rawData
                } else {
                    state.operationSelected = val
                    state.data = state.rawData.filter(item => item[columnProperty] == val)
                }
            }
        }
        

        const tableCellClassName = ({row, column, rowIndex, columnIndex}) => {
            var columnProperty = column.property
            var v = row[columnProperty]
            if (columnProperty == 'operation') {
                if (v == "卖出") {
                    return 'lt0-cell';
                } else if ( v == '买入') {
                    return 'wugu-lt100-cell'
                } else if ( v == '分红') {
                    return 'lpgt99-cell'
                } else if ( v == '模拟买入') {
                    return 'lplt10-cell'
                } else if ( v == '模拟卖出') {
                    return 'wugu-gt1000-cell'
                }
            }
            if (['state'].includes(columnProperty)) {
                if (v <= 0) {
                    return 'lt0-cell'
                }
            }
            return ''
        }

        return {state, tableCellClassName,sortChange, getDayOfWeek, cellClick}
    }
}
</script>

<style>
</style>